<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:icecore="http://www.icefaces.org/icefaces/core"
      xmlns:ace="http://www.icefaces.org/icefaces/components"
      xmlns:ice="http://www.icesoft.com/icefaces/component">
    
    <h:head>
        <title>SIVE - Crear marchamo</title>
        <ice:outputStyle href="./xmlhttp/css/rime/rime.css" />
        <ice:outputStyle href="css/style.css" />
        <ice:outputStyle href="css/bootstrap.css" rel="stylesheet" />
        <style type="text/css">
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet" ></link>
        
    <h:outputScript library="js" name="jquery.js" />
    <h:outputScript library="js" name="bootstrap.min.js" />
    <h:outputScript library="js" name="jquery.placeholder.min.js" />
        
    </h:head>
    <h:body>  
        
        <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
            <a class="brand" href="http://localhost:8080/sive_v3/index.html">SIVE - Sistema de Informaci&oacute;n Vehicular</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Marchamo <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="http://localhost:8080/sive_v3/faces/crearMarchamo.xhtml">Crear marchamo</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/modificarMarchamo.xhtml">Modificar marchamo</a></li>
                  <li><a href="#">Reactivar marchamo</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Estacionamiento <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/reservacionEvento.xhtml">Reservaci&oacute;n de evento</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/reservacionVisita.xhtml">Reservaci&oacute;n de visita</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/registroDeIncidentes.xhtml">Registro de incidentes</a></li>
                  <li><a href="http://localhost:8080/sive_v3/faces/registroDeMedidaC.xhtml">Registro multas e infracciones</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Consultas <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaMultiple.xhtml">Consultas m&uacute;ltiples</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaEspecifica.xhtml">Consultas espec&iacute;ficas</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/consultaIngresoVehiculo.xhtml">Consulta de Ingreso de Vehículos</a></li>
                </ul>
              </li>
              <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown">Historial <b class="caret"></b></a>
                <ul class="dropdown-menu">
                    <li><a href="http://localhost:8080/sive_v3/faces/estadisticasVehiculares.xhtml">Estad&iacute;sticas y reportes</a></li>
                    <li><a href="http://localhost:8080/sive_v3/faces/revisionVehiculo.xhtml">Revisi&oacute;n de veh&iacute;culo</a></li>
                </ul>
              </li>
                   <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Ayuda<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="http://localhost:8080/sive_v3/faces/ayudaPrincipal.xhtml">Ver Ayuda</a></li>
                                </ul>
                            </li>
            </ul>
              <p class="navbar-text pull-right">
              Identificado como: <a href="#" class="navbar-link">admin</a>
            </p>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>
        
        <img src="img/appbar.base.arrow.png" alt="ir atras" class="nav-back" onclick="history.go(-1)" />
        <h3 class="header-bg">Sistema de Información Vehicular | Crear marchamo</h3>
        <h:message id="javax_faces_developmentstage_messages"></h:message>
        <!--Info Usuario-->
            <h:form>
            <!--Ace tabs-->
            <ace:tabSet  clientSide="true" styleClass="panel-tabs">
                <ace:tabPane id="panelUsuario" label="1. Información del Usuario" styleClass="no-margin-top" >
            <!--Ace tabs-->

            <ace:panel styleClass="contenedorDatos" >
<!--                <p class="help-box">Ingrese los datos del usuario a la izquierda.<span class="strong"> Los campos marcados con (*) son requeridos.</span></p>-->
                <h:panelGrid columns="1" width="100%" >
                    <p style="font-weight: bold; text-align: left" class="no-margins">Por favor ingrese los datos solicitados a continuación</p><p style="text-align: right" class="no-margins">Marchamo #001</p>
                    <ace:textEntry id="marchamo" value="#{marchamoController.selected.idMarchamo}" label="ID Marchamo" labelPosition="left" 
                                   required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                    <h:graphicImage class="ico-label" value="img/ico/vcard.png" alt="cedula"/>
                    <ace:textEntry id="cedula" value="#{marchamoController.selected.cedula}" label="Cédula" labelPosition="left" 
                                   required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                    <h:graphicImage class="ico-label" value="img/ico/user.png" alt="nombre"/>
                    <ace:textEntry id="nombre1" value="#{marchamoController.selected.nombre1}" label="Primer nombre" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                    <ace:textEntry id="nombre2" value="#{marchamoController.selected.nombre2}" label="Segundo Nombre" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                    <ace:textEntry id="apellido1" value="#{marchamoController.selected.apellido1}" label="Primer apellido" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                    <ace:textEntry id="apellido2" value="#{marchamoController.selected.apellido2}" label="Segundo apellido" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>
                    
                   <ice:selectOneMenu id="estadoCivil" value="#{marchamoController.selected.estadoCivil}" styleClass="combo-civil">
                        <label for="estadoCivil" class="combo-lb4">Estado civil: </label>
                        <f:selectItem itemLabel="Soltero(a)" itemValue="Soltero" />
                        <f:selectItem itemLabel="Casado(a)" itemValue="Casado" />
                        <f:selectItem itemLabel="Unión libre" itemValue="Union_libre" />
                        <f:selectItem itemLabel="Divorciado(a)" itemValue="Divorciado" />
                        <f:selectItem itemLabel="Viudo(a)" itemValue="Viudo" />
                    </ice:selectOneMenu>
                    
                    <h:graphicImage class="ico-label" value="img/ico/phone.png" alt="telefono"/>
                    
                    <h:panelGroup>
                    <ace:textEntry id="telefono1" value="#{marchamoController.selected.telefono1}" label="Teléfono 1" labelPosition="left" required="false" optionalIndicator="(*)" indicatorPosition="right"> 
                    </ace:textEntry>
                        
                    <span class="group-separator"/>    
                    <ace:textEntry id="telefono2" value="#{marchamoController.selected.telefono2}" styleClass="group-element" label="Teléfono 2" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                        
                    </ace:textEntry>
                    </h:panelGroup>
                    
                    <h:panelGroup>
                    <h:graphicImage class="ico-label" value="img/ico/email.png" alt="email"/>
                    <ace:textEntry id="email" value="#{marchamoController.selected.email}" label="Correo Electrónico" labelPosition="left" required="false" optionalIndicator="(*)" indicatorPosition="right">
                        <f:validateLength minimum="2"/>
                    </ace:textEntry>
                    
                    <span class="group-separator"/>
                    <h:graphicImage class="ico-label" value="img/ico/building.png" alt="work"/>
                    <ice:selectOneMenu id="lugarDeTrabajo" value="#{marchamoController.selected.lugarDeTrabajo}" >
                        <label for="lugarDeTrabajo" class="combo-lb4">Centro de Estudio/Trabajo: </label>
                        <f:selectItem itemLabel="Biología" itemValue="Biologia" />
                        <f:selectItem itemLabel="Informática" itemValue="Informatica" />
                        <f:selectItem itemLabel="Tierra y mar" itemValue="Tierra y Mar" />
                        <f:selectItem itemLabel="Filosofía y letras" itemValue="Filosofia" />
                        <f:selectItem itemLabel="Estudios generales" itemValue="Estudios Generales" />
                    </ice:selectOneMenu>
                    </h:panelGroup>          
                    
                    </h:panelGrid>
                                
        <!--TOOLTIPS-->
        <ace:tooltip id="tooltipNombre"
            for="nombre1"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
            <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:graphicImage  id="img0" value="" alt=""/>
                <h:outputText id="desc0" value="Nombre no debe contener números"/>
            </h:panelGrid>   
        </ace:tooltip>

       
          <ace:tooltip id="tooltipCedula"
            for="cedula"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:outputText id="desc1" value="Cédula no debe tener guiones ni espacios en blanco. Ejemplo: 113630159"/>
            </h:panelGrid>   
           </ace:tooltip>
        
         <ace:tooltip id="tooltipTelefono"
            for="telefono1"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:outputText id="desc2" value="Teléfono tiene 8 dígitos. No digite guiones ni espacios. Ej. 89184490"/>
            </h:panelGrid>   
           </ace:tooltip> 
        
        <ace:tooltip id="tooltipEmail"
            for="email"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:outputText id="desc3" value="Ejemplo: usuario@una.ac.cr"/>
            </h:panelGrid>   
           </ace:tooltip> 
        
         <ace:tooltip id="tooltipWorkplace"
            for="lugarDeTrabajo"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                <h:outputText id="desc4" value="Seleccione un lugar de contacto para el usuario"/>
            </h:panelGrid>   
          </ace:tooltip>
        
            </ace:panel>
        <!--TOOLTIPS usuario-->
        </ace:tabPane>
                
        <!--FIN INFO USUARIO-->        
                
        <!--Info Vehiculo-->
        <ace:tabPane id="panelVehiculo" label="2. Información del Vehículo">
            <!-- Panel Grid Vehiculo -->
            <h:panelGrid styleClass="centeredPanelGrid" >
<!--        <h:form id="textEntryFormCAR" styleClass="dataEntryForm">-->
            <ace:panel id="carInputPanel" styleClass="contenedorDatos">
<!--                <p class="help-box">Por favor rellene los campos del formulario de la izquierda. <span class="strong">Los campos marcados con (*) son requeridos.</span></p>-->
                <h:panelGrid id="inputGrid2" columns="1" width="100%" styleClass="textEntryInputTable">
                     <p style="font-weight: bold; text-align: left" class="no-margin-top">Ingrese aquí la información del vehículo. Cuando haya terminado presione el botón guardar marchamo.</p>
                    <ace:textEntry id="placaVehiculo" value="#{marchamoController.selected.placaVehiculo}" label="Placa" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                    
                    </ace:textEntry>
                   
                    <ice:selectOneMenu id="marcaVehiculo" value="#{marchamoController.selected.marcaVehiculo}">
                        <label for="marcaVehiculo" class="combo-lb1">Marca: </label>
                        <f:selectItem itemLabel="Audi" itemValue="Audi" />
                        <f:selectItem itemLabel="BMW" itemValue="BMW" />
                        <f:selectItem itemLabel="Mercedes Benz" itemValue="Mercedez Benz"/>
                        <f:selectItem itemLabel="Honda" itemValue="Honda" />
                        <f:selectItem itemLabel="Toyota" itemValue="Toyota" />
                    </ice:selectOneMenu>

                    <ace:textEntry id="modeloVehiculo" value="#{marchamoController.selected.modeloVehiculo}" label="Modelo" labelPosition="left" required="false" requiredIndicator="(*)" indicatorPosition="right">
                 
                    </ace:textEntry>
<!--                    <ace:textEntry id="modeloV" value="" label="Modelo" labelPosition="left" required="true" requiredIndicator="(*)" indicatorPosition="right">
                    </ace:textEntry>-->

                        <ice:selectOneMenu id="anioVehiculo" value="#{marchamoController.selected.anioVehiculo}">
                        <label for="anioVehiculo" class="combo-lb2">Año </label>
                        <f:selectItem itemLabel="1999" itemValue="1999" />
                        <f:selectItem itemLabel="2000" itemValue="2000" />
                        <f:selectItem itemLabel="2001" itemValue="2001" />
                        <f:selectItem itemLabel="2002" itemValue="2002" />
                        <f:selectItem itemLabel="2003" itemValue="2003" />
                    </ice:selectOneMenu>

                        <ice:selectOneMenu id="colorVehiculo" value="#{marchamoController.selected.colorVehiculo}">
                        <label for="colorVehiculo" class="combo-lb3">Color: </label>
                        <f:selectItem itemLabel="Rojo" itemValue="Rojo" />
                        <f:selectItem itemLabel="Negro" itemValue="Negro" />
                        <f:selectItem itemLabel="Verde" itemValue="Verde" />
                        <f:selectItem itemLabel="Azul" itemValue="Azul" />
                        <f:selectItem itemLabel="Blanco" itemValue="Blanco" />
                    </ice:selectOneMenu>
                </h:panelGrid>
                
                <h:panelGrid styleClass="centeredPanelGrid">
<!--                    <ace:pushButton id="save" action="confirmation.show()">Crear marchamo</ace:pushButton>-->
<a href="http://localhost:8080/sive_v3/faces/registroHorario.xhtml"><input type="button" id="login" value="Registrar Horario" Class="botonEnviarConsulta" /></a>
<h:commandButton id="save" value="Guardar Marchamo &raquo;" onclick="confirmation.show()" type="button" class="save" />
            </h:panelGrid>
                        <ace:confirmationDialog id="confirmDialog"
                                    widgetVar="confirmation"
                                    message="Seguro(a) que desea guardar esta información?"
                                    header="Confirmación"
                                    width="450"
                                    height="200"
                                    modal="false"
                                    closeOnEscape="true"
                                    closable="true"
                                    position="center"
                                    styleClass="dialog-margin">
                <h:panelGrid columns="2" styleClass="centeredPanelGrid">
                    <h:commandButton id="yes" value="Sí" onclick="confirmation.hide()" actionListener="#{marchamoController.create}"/>
                    <h:commandButton id="no" value="No" onclick="confirmation.hide()" action="#{marchamoController.doNothing}" />
                </h:panelGrid>
            </ace:confirmationDialog>
                       
            </ace:panel>

        <!-- Tooltips Vehiculo -->
        
        <ace:tooltip id="tooltipPlaca"
            for="placaVehiculo"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                  <h:outputText id="desc5" value="Sin guiones ni espacios. Ejemplo: BXH432 ó 540321"/>
            </h:panelGrid>   
          </ace:tooltip>
        
        <ace:tooltip id="tooltipModelo"
            for="modeloVehiculo"
            speechBubble="true"
            showEffect="slide"
            hideEffect="grow"
            showDelay="500"
            hideDelay="300"
            position="bottomLeft"
            targetPosition="topRight"
            showEffectLength="300"
            hideEffectLength="300">
              <h:panelGrid styleClass="tooltipBoxStyle"> 
                  <h:outputText id="desc6" value="Ejemplo: Elantra" />
            </h:panelGrid>   
          </ace:tooltip>
       
            
        <!-- Tooltips Vehiculo -->
            </h:panelGrid>
         </ace:tabPane>        
                
            </ace:tabSet>
            
            </h:form>
            
        
        <div class="container centered">
         
            <footer class="footer">
                <span>Desarrollado por: Grupo de trabajo SIVE- </span><script type="text/javascript">
                    document.write ('Hoy es <span id="date-time">', new Date().toLocaleString(), '</span>.')
                    if (document.getElementById) onload = function () {
                        setInterval ("document.getElementById ('date-time').firstChild.data = new Date().toLocaleString()", 50)
                    }
                </script>
            </footer>
     </div>
        
        
    </h:body>
</html>